<template>
  <div>
    <div id="pie"></div>
  </div>
</template>

<script>
import { picData } from '@api/api'

  export default {
    name: 'pie',
    data () {
      return {
        id:["STAT-013","STAT-011","STAT-012"],
        picD:[],
        option: {
          //'#7bed9f','#ff6348','#70a1ff'
          // color:['#00ffff','#006ced','#fca55f'],//配置颜色
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            bottom: '-2%',
            data: ['纯电动', '混合动力','燃料电池'],
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          series: [
            {
              name: '燃料类型',
              type: 'pie',
              radius: '40%',
              // center: ['50%', '50%'],
              top: '-40%',
              label: {//去除饼图的指示折线label
                normal: {
                  show: false,
                  // position: 'inside',
                  // formatter:"{b}:{d}%"
                },
              },
              data: [
                {
                  name: '纯电动',
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: { // 颜色渐变
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0,
                          color: '#73e7e1' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#00998f' // 100% 处的颜色1
                        }]
                      },
                      // borderWidth: 5,
                      // shadowBlur: 5,
                      // shadowColor: '#00ffff',
                    }
                  }
                },
                {
                  name: '混合动力',
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: { // 颜色渐变
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0,
                          color: '#338cdf' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#0660b5' // 100% 处的颜色1
                        }]
                      },
                      // borderWidth: 5,
                      // shadowBlur: 5,
                      // shadowColor: '#006ced',
                    }
                  }
                },
                {
                  name: '燃料电池',
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: { // 颜色渐变
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0,
                          color: '#fca55f' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#d57121' // 100% 处的颜色1
                        }]
                      },
                      // borderWidth: 5,
                      // shadowBlur: 5,
                      // shadowColor: '#fca55f',
                    }
                  }
                },
              ].sort(function (a, b) { return a.value - b.value; }),
              roseType: 'radius',
            }
          ]
        }
      }
    },
    mounted(){
      this.getPicData()
    },
    methods: {
      drawLine(){
        let pie = this.$echarts.init(document.getElementById('pie'))
        pie.setOption(this.option);
        let sizeFun = function () {
          pie.resize()
        }
        window.addEventListener('resize', sizeFun )
      },
      getPicData(){
        var that = this;
        let params = {
          id : that.id.toString()
        }
        picData(params).then((res)=>{
          if(res.success){
            that.picD = res.result;
            for(var i=0;i<that.picD.length;i++){
              if(that.picD[i].name.toString().indexOf("燃料电池")>0){
                that.option.series[0].data[2].value=that.picD[i].value
              }else if(that.picD[i].name.toString().indexOf("混合动力")>0){
                that.option.series[0].data[1].value=that.picD[i].value
              }else{
                that.option.series[0].data[0].value=that.picD[i].value
              }
            }
            this.drawLine()
          }
        })
      }
    }
  }
</script>

<style scoped>
  #pie {
    width: 100%;
    /*height: 170px;*/
    height: 20vh;
  }
</style>